{include file="public/head"/}
<style>
    .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
    }
</style>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <blockquote class="layui-elem-quote">
                对授权系统的菜单管理，非管理人员慎用！<br>
            </blockquote>
            <div>
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btn-expand">全部展开</button>
                    <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                </div>
                <div class="layui-btn-group" id="layerDemo">
                    <button class="layui-btn layui-btn-normal  data-add-btn" data-method="add"> 添加 </button>
                </div>
                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
            </div>
        </div>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <!-- <a class="layui-btn layui-btn-disbleabn layui-btn-xs" lay-event="del">删除</a> -->
</script>

    <script>
        layui.use(['table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;
            // 渲染表格
            layer.load(2);
            var tableList = treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#munu-table',
                url: 'menus',
                page: false,
                cols: [[
                    { field: 'title', minWidth: 200, title: '菜单名称', edit: 'text' },
                    { field: 'icon', title: '权限标识'},
                    { field: 'href', title: '菜单url', edit: 'text' },
                    { field: 'sort', width: 80, align: 'center', title: '排序号', edit: 'text' },
                    {
                        filed: 'target', width: 80, align: 'center', templet: function (d) {
                            if (d.target === '_self') {
                                return '<span class="layui-badge layui-bg-gray">系统页</span>';
                            } else if (d.target == '_block') {
                                return '<span class="layui-badge layui-bg-gray">新弹窗</span>';
                            }
                        }, title: '类型'
                    },
                    { templet: '#auth-state', width: 120, align: 'center', title: '操作' }
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });

            $('#btn-expand').click(function () {
                treetable.expandAll('#munu-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#munu-table');
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if(layEvent === 'edit') {
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2 //此处以iframe举例
                        , title: '菜单添加'
                        , area: ['80%', '80%']
                        , shade: 0
                        , maxmin: true
                        , content: "{:url('edit')}?id=" + data.id 
                        , btn: ['关闭']
                        , yes: function () {
                            layer.closeAll();
                        }
                        , zIndex: layer.zIndex //重点1
                        , success: function (layero) {
                            layer.add(layero); //重点2
                        }
                    });
                }
            });
            table.on('edit(munu-table)', function (obj) {
                // 编辑事件
                $.post('{:url("update")}', { id: obj.data.id, field: obj.field, value: obj.value }, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { time: 1000, icon: 1 });
                    } else {
                        layer.msg(res.msg, { time: 1000, icon: 2 });
                    }
                })
            });
            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
            var active = {
                add: function () {
                    var that = this;
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2 //此处以iframe举例
                        , title: '菜单添加'
                        , area: ['80%', '80%']
                        , shade: 0
                        , maxmin: true
                        , content: "{:url('add')}"
                        , btn: ['关闭']
                        , yes: function () {
                            layer.closeAll();
                        }
                        , zIndex: layer.zIndex //重点1
                        , success: function (layero) {
                            layer.add(layero); //重点2
                        }
                    });
                }
            }

        });
    </script>
    {include file="public/footer"/}